<template>
	<div class="content-header">
		<el-scrollbar>
			<el-row style="overflow: auto;">
				<el-card class="help-card-whole">
					<template #header>
						<div class="help-title help-header">
							<span>
								我的求助
							</span>
							<el-select v-model="recValue" placeholder="审核状态">
								<el-option value="0" label="全部"></el-option>
								<el-option value="2" label="已发布"></el-option>
								<el-option value="3" label="未通过"></el-option>
							</el-select>
						</div>
					</template>

					<div>
						<el-scrollbar max-height="500px">
							<el-row v-loading='list_loading_myWisdom' element-loading-text="拼命加载资源中"
								element-loading-background="rgba(255, 255, 255, 1)" style="margin: 10px 0 10px 0;">

								<div style="min-height: 9.375rem;background-color: #FFFFFF;margin: 10px 0 10px 0;"
									v-show="list_loading_myWisdom">
								</div>

								<el-col :xs="{span:24}" :sm="{span:24}" :md="{span:12}" :lg="{span:8}" :xl="{span:8}"
									v-for="(item,index) in myWisdomList">
									<a target="_blank" href="../">
										<el-card class="help-card-child card-list-item" shadow="hover"
											:body-style="{ padding: '20px'}">
											<template #header>

												<img width="64" height="64"
													:src="userInfo.portrait"
													class="image_avatar" />
												<div>
													<span class="card_title"
														style="font-size: 18px;">{{item.userId}}的求助💡</span>
													<div class="bottom">
														<div class="card_content">
															{{item.wish_content}}
														</div>
														<!-- 标签模块 -->
														<div>
															<span v-for="tag in item.wish_tag_list">
																<el-tag class="tag-style tag-speciall-style"
																	type="info">
																	{{tag}}
																</el-tag>
															</span>
														</div>

													</div>
												</div>

											</template>
											<div class="card_content_time">
												<span>发布时间：{{item.wish_time}}</span>
												<el-tag type="success">已完成</el-tag>
											</div>


										</el-card>
									</a>
								</el-col>
							</el-row>
						</el-scrollbar>
						
						<el-pagination background layout="prev, pager, next" :total="listNum" :page-size="pageSize"
							:current-page="currentPage" @current-change="pageChange" v-show="pageView">
						</el-pagination>
					</div>

					<el-empty description="您暂时还没有发起过求助~" v-show="infoStatus">
						<el-button type="primary" @click="goWisdom()">我要发布求助</el-button>
					</el-empty>
				</el-card>
			</el-row>

		</el-scrollbar>
	</div>
</template>

<script lang="ts">
	import Qs from 'qs';
	import {
		ElMessage
	} from 'element-plus';
	export default {
		created() {
			this.getMyWisdomList();
		},
		data() {
			return {
				infoStatus: false,
				pageView: false,
				list_loading_myWisdom: true,
				recValue: '',
				listNum: 0,
				currentPage: 1,
				pageSize: 6,
				myWisdomList: [],
				myUserId: '',
				userInfo: JSON.parse(localStorage.getItem("pg_userInfo")),

			}
		},
		methods: {
			goWisdom(){
				this.$router.push('/wisdom');
			},
			checkIsJsonString(str) {
				try {
					//通过JSON将str转换为json对象，如果转换出现异常，进入catch,返回false
					let obj = JSON.parse(str);
					if (typeof obj === 'object' && obj) {
						return true;
					} else {
						return false;
					}
				} catch (error) {
					//转换异常，返回false
					return false;
				}
			},
			pageChange(currentPage) {
				this.currentPage = currentPage;
				this.myWisdomList = [];
				this.list_loading_myWisdom = true;
				this.getMyWisdomList(currentPage, 6);
			},
			getMyWisdomList(r_pageNum = 1, r_pageSize = 6) {
				let that = this;
				//发送请求
				this.$axios({
					url: 'http://localhost:8080/wisdom/listMyWisdom',
					method: 'post',
					headers: {
						'Content-Type': 'application/json',
						'token': localStorage.pg_token,
					},
					transformRequest: [function(data) {
						// 对 data 进行任意转换处理
						return Qs.stringify(data);
					}],
					data: {
						pageNum: r_pageNum,
						pageSize: r_pageSize,
					},
					// data: this.addWisdomData,
					transformResponse: [function(data) {
						// 对接收的 data 进行任意转换处理
						let result;
						if (that.checkIsJsonString(data)) {
							result = JSON.parse(data);
						} else {
							ElMessage({
								message: '请求服务器返回数据失败',
								type: 'error',
							});
							that.list_loading_myWisdom = false;
							return data;
						}

						// console.log(result);
						if (result.code === 200) {
							if(result.data.listCount>0){
								that.myWisdomList = result.data.resultList;
								that.myUserId = result.data.userId;
								that.listNum = result.data.listCount;
								that.pageView = true;
							} else{
								that.infoStatus = true;
							}
						} else {
							ElMessage({
								message: result.msg + '(' + result.error_code + ')',
								type: 'error',
							});
							// that.$router.go(0);
						}
						that.list_loading_myWisdom = false;
						return data;
					}],
				}).catch(function(error) {
					if (error.response) {
						// 请求成功发出且服务器也响应了状态码，但状态代码超出了 2xx 的范围
						that.$message.error("服务器响应出错，请稍后再试");

					} else if (error.request) {
						that.$message.error("请求服务器错误或超时,请稍后再试");
					} else {
						// 发送请求时出了点问题
						that.$message.error("发送请求出现问题，请稍后再试");
					}
					that.pageView = false;
					that.list_loading_myWisdom = false;
					that.infoStatus = true;
				});
			},
		}

	}
</script>

<style>
	a {
		text-decoration: none;
		background-color: transparent;
		outline: none;
		cursor: pointer;
		transition: color .3s;
	}

	.tag-style {
		margin: 0 0.3125rem 0.3125rem 0;
		border-radius: 0.3125rem;
	}

	.help-card-meta {
		display: flex;
		align-items: center;
	}

	.help-card-action {
		position: absolute;
		right: 0;
	}

	.help-card-content {
		text-align: left;
		margin: 0.125rem 0 0 0;
	}

	.help-card-title {
		margin-bottom: 0.3125rem;
	}

	.help-card-child {
		margin: 0 1.5rem 1.5rem 1.5rem;
	}

	.help-card-child:hover .card_title {
		color: #c85554;
		font-weight: 500;
		transition: .1s;

	}

	.help-card-header {
		margin-right: 1rem;
	}

	.help-card-description {
		/* margin: 0 0 0 15px; */
		color: #999999;
		font-size: 14px;
	}

	.help-title {
		color: #8b8b8b;
		font-size: 20px;
		margin-top: 0.3125rem;
	}

	.help-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}


	.image_avatar {
		border-radius: 50%;
	}

	.card-page {
		width: -webkit-fill-available;
		cursor: default !important;
		margin: 0 0.9375rem 0 0.9375rem;
		border-radius: 0.3125rem;
	}

	.el-row {
		height: auto;
	}

	.container {
		position: relative;
		display: flex;
		flex-flow: row wrap;
		overflow: auto;
	}




	.card-list {
		margin-top: 0px !important;
		height: 100%;
		box-sizing: border-box;
		cursor: default !important;
		text-align: left;
	}

	.card_content {
		/* padding: 10px; */
		color: #999999;
		font-size: 14px;
		text-align: center;
		margin: 1rem 0 1rem 0;
		min-height: 55px;
		display: -webkit-box;
		overflow: hidden;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
	}

	.card_content_time {
		/* padding: 10px; */
		color: #999999;
		font-size: 13px;
		text-align: left;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}



	.content-header {
		display: flex;
		flex-grow: 1;
		margin: 0 5px 0 5px;
		flex-direction: column;
		/* flex-wrap: wrap; */
		/* background-color: #FFF; */
	}





	.card-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.help-card-whole {
		height: max-content;
		width: 100%;
		padding: 0 3.125rem;
		margin: 0 1.25rem;
	}

	/* .el-page-header__left{
		width: 0;
		display: none;
	} */
</style>
